<template>
  <div class="communitywecome f-d-c">
    <div class="itembox">
      <div class="item f-j-a-c f-d-c">
        <!-- :style="backgroundStyle" -->
        <div class="textwebcom f-d-c f-j-a-c" ref="paper">
          <span>欢迎来到迷你SNS演示社区-宠也</span>
          <div class="overall-header-left">
            <span ref="text" class="msg"></span>
            <!-- <vuetyped
              :strings="['面试官你好', '我叫刘凯利', '来自天津']"
              :loop="true"
              :type-speed="300"
              :smart-backspace="true"
            >
              <div class="typing span" />
            </vuetyped> -->
          </div>
        </div>
        <div class="wecomeinput f-j-a-c">
          <img
            src="../../../assets/image/icon-search@2x.png"
            class="inputimg"
            alt=""
          />
          <input
            @focus="focusinput"
            type="text"
            v-model="input2"
            class="inputtiei"
            @keydown.enter="keyboard"
            placeholder="搜索圈子、话题和用户..."
          />
          <div class="buttonSearch click f-a-c f-j-a-c" @click="keyboard">
            <svg-icon name="icon-search-bai"></svg-icon>
            <span>搜索</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import TypeIt from "typeit";
import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  ref,
} from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
export default defineComponent({
  components: {
    // vuetyped,
  },
  setup() {
    const backgroundStyle = computed(() => {
      return {
        backgroundPosition: `${data.newPercentage}% 50%`,
        // background: `linear-gradient(${data.newdeg}deg, #e7fbeb, #f7f9f9, #daf9ff, #f8fafa, #e5e2fd, #f2f2fc,#e6fbf8,#ecf1fc)`,
      };
    });
    const text = ref(null);
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    let minToken = computed(() => {
      return store.state.minToken;
    });
    let store = useStore();
    let data = reactive({
      newPercentage: 75, // 初始的百分比值
      input2: "",
      newdeg: 0,
      increment: false,
    });
    onMounted(() => {
      proxy.$nextTick(() => {
        new TypeIt(text.value, {
          strings: [
            "来一起谈天说地，做思想的飞行员",
            "分享创意，记录生活",
            "AIGC, 成为一个厉害的普通人",
          ],
          cursorChar: "<span class='cursorChar'>|<span>", //用于光标的字符。HTML也可以
          speed: 100,
          lifeLike: true, // 使打字速度不规则
          cursor: true, //在字符串末尾显示闪烁的光标
          breakLines: false, // 控制是将多个字符串打印在彼此之上，还是删除这些字符串并相互替换
          loop: true, //是否循环
          deleteSpeed: 100,
          nextStringDelay: [1000, 2000],
        }).go();
      });

      setInterval(() => {
        if (data.increment) {
          data.newPercentage += 1;
          data.newdeg += 1;
          if (data.newPercentage >= 100) {
            data.increment = false;
          }
        } else {
          data.newPercentage -= 1;
          data.newdeg -= 1;
          if (data.newPercentage <= 0) {
            data.increment = true;
          }
        }
      }, 100);
    });

    onUnmounted(() => {});

    let focusinput = () => {
      // console.log(123);
    };

    let keyboard = () => {
      if (!minToken.value) {
        return ElMessage.warning("请先进行登录");
      }
      if (!data.input2) return ElMessage.warning("请输入要搜索的内容");
      router.push({
        path: "/pages/common/search",
        query: {
          keyword: data.input2,
        },
      });
    };

    return {
      minToken,
      text,
      keyboard,
      focusinput,
      backgroundStyle,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.msg {
  color: rgb(88, 88, 88);
  letter-spacing: 2px;
}

.msg :v-deep(.cursorChar) {
  display: inline-block;
  margin-left: 2px;
}
.typing {
  transition: all 0.1s;
}

.cursor {
  animation: cursorBlink 0.7s infinite;
}

@keyframes cursorBlink {
  from,
  to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.buttonSearch {
  position: absolute;
  right: 5px;
  width: 120px;
  height: 42px;
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
  border-radius: 22px 22px 22px 22px;
  > span {
    margin-left: 10px;
    font-size: 16px;
    font-family: Arial-Regular, Arial;
    font-weight: 400;
    color: #ffffff;
  }
}
.communitywecome {
  position: relative;
  padding-top: 160px;
  padding-bottom: 280px;
}
.itembox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;

  background: -webkit-linear-gradient(
    135deg,
    #eefcff,
    #ecfff4,
    #f7eaff,
    #e7fff1,
    #fff6ea
  );
  background: -o-linear-gradient(
    135deg,
    #eefcff,
    #ecfff4,
    #f7eaff,
    #e7fff1,
    #fff6ea
  );
  background: linear-gradient(
    315deg,
    #eefcff,
    #ecfff4,
    #f7eaff,
    #e7fff1,
    #fff6ea
  );
  -webkit-animation: gradient 18s ease infinite;
  animation: gradient 18s ease infinite;
  -webkit-background-size: 400% 400%;
  background-size: 400%;
  background-blend-mode: multiply;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.item {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgba(243, 245, 247, 0)),
    color-stop(99%, #f9f9f9)
  );
  background: -webkit-linear-gradient(
    top,
    rgba(243, 245, 247, 0) 0%,
    #f9f9f9 99%
  );
  background: -o-linear-gradient(top, rgba(243, 245, 247, 0) 0%, #f9f9f9 99%);
  background: linear-gradient(180deg, rgba(243, 245, 247, 0) 0%, #f9f9f9 99%);
  // position: relative;
  // background: linear-gradient(
  //   60deg,
  //   #e7fbea,
  //   #effaf6,
  //   #daf9ff,
  //   #f0f9fc,
  //   #e5e5fd,
  //   #f2f2fb
  // );
  // animation: gradient 15s ease infinite;
  // background-size: 400%;
  // background: linear-gradient(to bottom, #e7fbea, #f9f9f9);
  //   position: absolute;
  //   top: 0;
  //   width: 100%;
  // padding-bottom: 267px;
  // padding-top: 267px;
  //   height: 800px;
  // height: 100%;
  // background-size: 300% 300%;
  // border: none;
  // box-shadow: 0 0 10px rgba(249, 249, 249, 0.5);
  // &::before {
  //   content: "";
  //   position: absolute;
  //   bottom: 0%;
  //   left: 0;
  //   width: 100%;
  //   background-color: red;
  //   height: 130px; /* 底部模糊区域的高度 */
  //   background: #f9f9f9;
  //   filter: blur(14px); /* 模糊效果的强度 */
  // }
}
.textwebcom {
  position: relative;
  margin: 0 auto;
  // margin-top: 160px;
  > span {
    font-size: 42px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    margin-bottom: 20px;
    color: #000000;
  }
}
.overall-header-left {
  position: absolute;
  top: 65px;
}
.span {
  display: block;
  // margin-top: 20px;
  font-size: 18px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #656f79;
}

.wecomeinput {
  position: relative;
  margin: 0 auto;
  margin-top: 50px;
  width: 850px;
  height: 53px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0px 15px 0px rgba(100, 200, 220, 0.1);
  border-radius: 94px 94px 94px 94px;
  opacity: 1;
  .inputtiei {
    padding: 0 44px;
    border: none;
    width: 100%;
    height: 100%;
    border-radius: 94px 94px 94px 94px;
  }
  .inputimg {
    width: 16px;
    height: 16px;
    position: absolute;
    left: 20px;
  }
}
</style>
